{
  // 和 v-bind:class 一样的 API
  // 接收一个字符串、对象和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 和'v-bind:style' 一样的 API
  // 接收一个字符串、对象、和对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的HTML 特性
  attrs: {
    id: 'foo'
  },
  // 组件props
  props: {
    muProp: 'bar'
  },
  // DOM属性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器基于 'on'
  // 所以不再支持如 'v-on:keyup.enter'修饰器
  // 需要手动匹配 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // 'vm.$emit' 触发的事件
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对‘binding’ 中的 'oldValue'
  // 赋值，因为Vue已经自动为你进行了同步
  directives: [
    {
      name: 'my-coustom-dirctive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  
  // 作用域插槽格式
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶级属性
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中向多个元素都应用了相同的ref名
  // 那么 '$refs.myRef' 会变成一个数组
  refInFor: true
  
}

// 实例
var getChildrenTextContent = function(children) {
  return children.map(function(node) {
    return node.children
      ? getChildrenTextContent(node.children)
      : node.text
  }).join('')
}

Vue.component('anchored-heading', {
  render: function (createElement) {
    // 创建 kebab-case 风格的ID
    var headingId = getChildrenTextContent(this.$slots.default)
      .toLowerCase()
      .replace(/\W+/g, '-')
      .replace(/(^-|-$)/g, '')
      
    return createElement(
      'h' + this.level,
      [
        createElement('a', {
          attrs: {
            name: headingId,
            href: '#' + headingId
          }
        }, this.$slots.default)
      ]
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})


// 使用JavaScript代替模板功能

// v-if and  v-for
<ul v-if="items.length">
  <li v-for="item in items">{{ item.name }}</li>
</ul>
<p v-else>No items found.</p>

// 这些都会在render函数中被JavaScript的 if/else 和 map 重写
props:['items'],
render: function(createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function(item) {
      return createElement('li', item.name)
    })) else {
      return createElement('p', 'No items found.')
    }
  }
}


// v-model 
// render函数中没有与v-model的直接对应-你必须自己实现响应的逻辑
props: ['value'],
render: function(createElement) {
  var self = this;
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function(event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}